<template>
    <div class="career-assessment-container">
      <div class="header">
        <h1><i class="fas fa-chart-line"></i> 职业评测</h1>
        <p class="subtitle">全面评估您的职业能力并生成详细报告</p>
      </div>
  
      <!-- 评测进度 -->
      <div class="progress-container" v-if="!showResult">
        <div class="progress-bar">
          <div 
            class="progress-fill" 
            :style="{ width: `${(currentQuestionIndex / questions.length) * 100}%` }"
          ></div>
        </div>
        <div class="progress-text">
          已完成 {{ currentQuestionIndex }} / {{ questions.length }} 题
        </div>
      </div>
  
      <!-- 评测介绍 -->
      <div class="intro-section" v-if="currentQuestionIndex === 0 && !showResult">
        <div class="intro-card">
          <h2>职业能力测评说明</h2>
          <div class="intro-content">
            <p>本测评将帮助您全面了解自己的职业能力倾向和优势领域。测评包含以下几个部分：</p>
            <ul>
              <li><i class="fas fa-check-circle"></i> 职业兴趣评估</li>
              <li><i class="fas fa-check-circle"></i> 能力倾向测试</li>
              <li><i class="fas fa-check-circle"></i> 性格特质分析</li>
              <li><i class="fas fa-check-circle"></i> 职业价值观评估</li>
            </ul>
            <p>完成全部测评大约需要15-20分钟，请根据您的真实情况作答。</p>
          </div>
          <button class="start-btn" @click="startAssessment">
            <i class="fas fa-play"></i> 开始测评
          </button>
        </div>
      </div>
  
      <!-- 测评问题 -->
      <div class="question-section" v-if="currentQuestionIndex > 0 && !showResult">
        <div class="question-card">
          <div class="question-header">
            <span class="question-category">{{ currentQuestion.category }}</span>
            <span class="question-number">问题 {{ currentQuestionIndex }} / {{ questions.length }}</span>
          </div>
          
          <h3 class="question-text">{{ currentQuestion.text }}</h3>
          
          <div class="options-container">
            <div 
              v-for="(option, index) in currentQuestion.options" 
              :key="index"
              class="option"
              :class="{ selected: selectedOption === index }"
              @click="selectOption(index)"
            >
              <div class="option-content">
                <span class="option-letter">{{ String.fromCharCode(65 + index) }}.</span>
                <span>{{ option.text }}</span>
              </div>
              <div class="option-weight" v-if="showOptionWeights">
                {{ option.weight }}
              </div>
            </div>
          </div>
          
          <div class="navigation-buttons">
            <button 
              class="prev-btn" 
              @click="prevQuestion"
              :disabled="currentQuestionIndex === 1"
            >
              <i class="fas fa-arrow-left"></i> 上一题
            </button>
            <button 
              class="next-btn" 
              @click="nextQuestion"
              :disabled="selectedOption === null"
            >
              {{ isLastQuestion ? '查看结果' : '下一题' }} <i class="fas fa-arrow-right"></i>
            </button>
          </div>
        </div>
      </div>
  
      <!-- 测评结果 -->
      <div class="result-section" v-if="showResult">
        <div class="result-header">
          <h2>您的职业测评报告</h2>
          <p class="result-subtitle">基于您的回答生成的个性化分析</p>
          <div class="result-meta">
            <span><i class="fas fa-calendar-alt"></i> {{ reportDate }}</span>
            <span><i class="fas fa-clock"></i> {{ completionTime }}分钟</span>
          </div>
        </div>
  
        <div class="result-card">
          <!-- 综合得分 -->
          <div class="score-section">
            <h3>综合职业能力得分</h3>
            <div class="score-circle">
              <div class="circle-progress" :style="circleStyle">
                <span class="score-value">{{ totalScore }}</span>
              </div>
              <div class="score-label">总分/100</div>
            </div>
            <div class="score-description">
              <p v-if="totalScore >= 80">您的综合职业能力非常优秀！您具备多方面的职业素养和能力，适合从事具有挑战性的工作。</p>
              <p v-else-if="totalScore >= 60">您的职业能力处于中等偏上水平，在某些领域表现突出，仍有提升空间。</p>
              <p v-else>您的职业能力有待提高，建议根据报告中的建议进行针对性提升。</p>
            </div>
          </div>
  
          <!-- 能力维度雷达图 -->
          <div class="radar-section">
            <h3>能力维度分析</h3>
            <div class="radar-chart-container">
              <canvas ref="radarChart"></canvas>
            </div>
            <div class="dimension-legend">
              <div v-for="(dimension, index) in dimensions" :key="index" class="legend-item">
                <span class="legend-color" :style="{ backgroundColor: getColor(index) }"></span>
                <span class="legend-text">{{ dimension.name }} ({{ dimensionScores[index] }}/20)</span>
              </div>
            </div>
          </div>
  
          <!-- 职业兴趣类型 -->
          <div class="interest-section">
            <h3>职业兴趣类型</h3>
            <div class="interest-type">
              <div class="type-badge" :style="{ backgroundColor: getColor(topInterestIndex) }">
                {{ interestTypes[topInterestIndex].type }}
              </div>
              <p class="type-description">{{ interestTypes[topInterestIndex].description }}</p>
            </div>
            <div class="interest-distribution">
              <div 
                v-for="(type, index) in interestTypes" 
                :key="index"
                class="interest-bar"
              >
                <div class="bar-label">{{ type.type }}</div>
                <div class="bar-container">
                  <div 
                    class="bar-fill" 
                    :style="{ 
                      width: `${(interestScores[index] / maxInterestScore) * 100}%`,
                      backgroundColor: getColor(index)
                    }"
                  ></div>
                  <span class="bar-value">{{ interestScores[index] }}</span>
                </div>
              </div>
            </div>
          </div>
  
          <!-- 性格特质 -->
          <div class="personality-section">
            <h3>性格特质分析</h3>
            <div class="personality-traits">
              <div 
                v-for="(trait, index) in personalityTraits" 
                :key="index"
                class="trait-card"
              >
                <div class="trait-header">
                  <h4>{{ trait.name }}</h4>
                  <div class="trait-score">
                    <span>{{ personalityScores[index] }}/10</span>
                  </div>
                </div>
                <div class="trait-progress">
                  <div 
                    class="progress-fill" 
                    :style="{ width: `${(personalityScores[index] / 10) * 100}%` }"
                  ></div>
                </div>
                <p class="trait-description">{{ getTraitDescription(trait, personalityScores[index]) }}</p>
              </div>
            </div>
          </div>
  
          <!-- 适合职业 -->
          <div class="career-section">
            <h3>适合职业推荐</h3>
            <div class="career-list">
              <div 
                v-for="(career, index) in recommendedCareers" 
                :key="index"
                class="career-card"
              >
                <div class="career-header">
                  <h4>{{ career.name }}</h4>
                  <span class="match-score">匹配度: {{ career.match }}%</span>
                </div>
                <p class="career-description">{{ career.description }}</p>
                <div class="career-skills">
                  <span v-for="(skill, i) in career.skills" :key="i" class="skill-tag">
                    {{ skill }}
                  </span>
                </div>
              </div>
            </div>
          </div>
  
          <!-- 发展建议 -->
          <div class="recommendation-section">
            <h3>职业发展建议</h3>
            <div class="recommendation-content">
              <div class="strengths">
                <h4><i class="fas fa-check-circle"></i> 您的优势</h4>
                <ul>
                  <li v-for="(strength, index) in strengths" :key="index">{{ strength }}</li>
                </ul>
              </div>
              <div class="improvements">
                <h4><i class="fas fa-lightbulb"></i> 提升建议</h4>
                <ul>
                  <li v-for="(improvement, index) in improvements" :key="index">{{ improvement }}</li>
                </ul>
              </div>
            </div>
          </div>
  
          <!-- 报告操作 -->
          <div class="report-actions">
            <button class="download-btn" @click="downloadReport">
              <i class="fas fa-download"></i> 下载报告 (PDF)
            </button>
            <button class="print-btn" @click="printReport">
              <i class="fas fa-print"></i> 打印报告
            </button>
            <button class="retake-btn" @click="retakeAssessment">
              <i class="fas fa-redo"></i> 重新测评
            </button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { Chart, registerables } from 'chart.js'
  Chart.register(...registerables)
  
  export default {
    name: 'CareerAssessment',
    data() {
      return {
        currentQuestionIndex: 0,
        selectedOption: null,
        showResult: false,
        startTime: null,
        endTime: null,
        answers: [],
        showOptionWeights: false,
        questions: [
          {
            id: 1,
            category: '职业兴趣',
            text: '您更喜欢哪种类型的工作环境？',
            dimension: 'interest',
            options: [
              { text: '安静、有序的办公室环境', weight: 1, dimensions: { realistic: 2, investigative: 3 } },
              { text: '需要与他人频繁交流的开放环境', weight: 2, dimensions: { social: 4, enterprising: 3 } },
              { text: '灵活自由、不受拘束的环境', weight: 3, dimensions: { artistic: 5, conventional: 1 } },
              { text: '充满挑战和变化的环境', weight: 4, dimensions: { enterprising: 5, investigative: 2 } }
            ]
          },
          {
            id: 2,
            category: '能力倾向',
            text: '您最擅长的技能类型是？',
            dimension: 'ability',
            options: [
              { text: '动手操作和机械技能', weight: 1, dimensions: { realistic: 5, investigative: 1 } },
              { text: '分析和逻辑思维能力', weight: 2, dimensions: { investigative: 5, artistic: 1 } },
              { text: '创造性和艺术表达能力', weight: 3, dimensions: { artistic: 5, social: 1 } },
              { text: '人际交往和沟通能力', weight: 4, dimensions: { social: 5, enterprising: 2 } }
            ]
          },
          {
            id: 3,
            category: '性格特质',
            text: '在团队中，您通常扮演什么角色？',
            dimension: 'personality',
            options: [
              { text: '领导者，负责决策和分配任务', weight: 1, dimensions: { leadership: 5, extraversion: 4 } },
              { text: '执行者，专注于完成分配的任务', weight: 2, dimensions: { conscientiousness: 5, agreeableness: 3 } },
              { text: '协调者，调解冲突促进合作', weight: 3, dimensions: { agreeableness: 5, emotional: 4 } },
              { text: '创新者，提出新想法和解决方案', weight: 4, dimensions: { openness: 5, creativity: 4 } }
            ]
          },
          {
            id: 4,
            category: '职业价值观',
            text: '您最看重工作的哪个方面？',
            dimension: 'values',
            options: [
              { text: '稳定的收入和福利保障', weight: 1, dimensions: { security: 5, stability: 4 } },
              { text: '职业发展和晋升机会', weight: 2, dimensions: { achievement: 5, advancement: 4 } },
              { text: '工作与生活的平衡', weight: 3, dimensions: { balance: 5, flexibility: 4 } },
              { text: '社会影响和意义', weight: 4, dimensions: { meaning: 5, service: 4 } }
            ]
          },
          {
            id: 5,
            category: '工作风格',
            text: '您更喜欢哪种工作方式？',
            dimension: 'workStyle',
            options: [
              { text: '独立完成，自己掌控进度', weight: 1, dimensions: { independence: 5, autonomy: 4 } },
              { text: '团队协作，共同完成任务', weight: 2, dimensions: { teamwork: 5, collaboration: 4 } },
              { text: '结构化，按照明确流程工作', weight: 3, dimensions: { structure: 5, routine: 4 } },
              { text: '灵活多变，适应不同任务', weight: 4, dimensions: { flexibility: 5, adaptability: 4 } }
            ]
          },
          {
            id: 6,
            category: '职业兴趣',
            text: '您对以下哪种活动最感兴趣？',
            dimension: 'interest',
            options: [
              { text: '修理或组装机械设备', weight: 1, dimensions: { realistic: 5, investigative: 2 } },
              { text: '研究科学或技术问题', weight: 2, dimensions: { investigative: 5, artistic: 1 } },
              { text: '创作艺术作品或表演', weight: 3, dimensions: { artistic: 5, social: 1 } },
              { text: '帮助或教导他人', weight: 4, dimensions: { social: 5, enterprising: 2 } }
            ]
          },
          {
            id: 7,
            category: '能力倾向',
            text: '面对新任务时，您通常会：',
            dimension: 'ability',
            options: [
              { text: '仔细分析后再行动', weight: 1, dimensions: { analytical: 5, cautious: 4 } },
              { text: '快速行动并在过程中调整', weight: 2, dimensions: { decisive: 5, adaptable: 4 } },
              { text: '寻求他人意见后再决定', weight: 3, dimensions: { collaborative: 5, communicative: 4 } },
              { text: '按照既有经验和方法处理', weight: 4, dimensions: { structured: 5, routine: 4 } }
            ]
          },
          {
            id: 8,
            category: '性格特质',
            text: '您如何处理压力情况？',
            dimension: 'personality',
            options: [
              { text: '保持冷静，理性分析问题', weight: 1, dimensions: { emotional: 5, resilience: 4 } },
              { text: '寻求他人支持和帮助', weight: 2, dimensions: { social: 5, support: 4 } },
              { text: '制定计划逐步解决', weight: 3, dimensions: { organized: 5, planning: 4 } },
              { text: '寻找创新解决方案', weight: 4, dimensions: { creative: 5, innovative: 4 } }
            ]
          },
          {
            id: 9,
            category: '职业价值观',
            text: '您希望从工作中获得什么？',
            dimension: 'values',
            options: [
              { text: '经济保障和生活稳定', weight: 1, dimensions: { security: 5, stability: 4 } },
              { text: '社会地位和他人认可', weight: 2, dimensions: { recognition: 5, status: 4 } },
              { text: '个人成长和能力提升', weight: 3, dimensions: { growth: 5, learning: 4 } },
              { text: '自我实现和成就感', weight: 4, dimensions: { fulfillment: 5, purpose: 4 } }
            ]
          },
          {
            id: 10,
            category: '工作风格',
            text: '您如何看待工作中的规则和程序？',
            dimension: 'workStyle',
            options: [
              { text: '严格遵守规则和程序', weight: 1, dimensions: { conformity: 5, detail: 4 } },
              { text: '在规则框架内灵活应用', weight: 2, dimensions: { flexible: 5, adaptable: 4 } },
              { text: '必要时可以突破规则', weight: 3, dimensions: { innovative: 5, risk: 4 } },
              { text: '更关注结果而非规则', weight: 4, dimensions: { result: 5, pragmatic: 4 } }
            ]
          }
        ],
        dimensions: [
          { name: '实践型', key: 'realistic' },
          { name: '研究型', key: 'investigative' },
          { name: '艺术型', key: 'artistic' },
          { name: '社会型', key: 'social' },
          { name: '企业型', key: 'enterprising' },
          { name: '常规型', key: 'conventional' }
        ],
        interestTypes: [
          { 
            type: '实践型(R)', 
            description: '喜欢与物体、工具、机器、动物打交道，偏好需要技能、力量和协调性的户外活动。适合职业: 工程师、技术员、农民等。'
          },
          { 
            type: '研究型(I)', 
            description: '喜欢观察、学习、分析和解决问题，偏好需要思考和组织能力的活动。适合职业: 科学家、研究员、程序员等。'
          },
          { 
            type: '艺术型(A)', 
            description: '喜欢创造性的、无固定模式的活动，偏好自我表达和艺术创作。适合职业: 艺术家、设计师、作家等。'
          },
          { 
            type: '社会型(S)', 
            description: '喜欢帮助、教导和服务他人，偏好与他人交往的活动。适合职业: 教师、护士、心理咨询师等。'
          },
          { 
            type: '企业型(E)', 
            description: '喜欢领导和影响他人，偏好需要说服力和领导力的活动。适合职业: 经理、销售、律师等。'
          },
          { 
            type: '常规型(C)', 
            description: '喜欢有条理、结构化的活动，偏好需要精确性和服从性的工作。适合职业: 会计、秘书、行政人员等。'
          }
        ],
        personalityTraits: [
          { name: '外向性', key: 'extraversion' },
          { name: '宜人性', key: 'agreeableness' },
          { name: '尽责性', key: 'conscientiousness' },
          { name: '情绪稳定性', key: 'emotional' },
          { name: '开放性', key: 'openness' }
        ],
        recommendedCareers: [
          {
            name: '软件工程师',
            match: 85,
            description: '设计、开发和测试计算机软件系统，解决复杂的技术问题。',
            skills: ['编程', '算法', '问题解决']
          },
          {
            name: '产品经理',
            match: 78,
            description: '规划产品路线图，协调团队实现产品目标，满足用户需求。',
            skills: ['沟通', '规划', '市场分析']
          },
          {
            name: '数据分析师',
            match: 72,
            description: '收集、处理和分析数据，提供商业洞察和决策支持。',
            skills: ['统计', 'SQL', '数据可视化']
          }
        ],
        strengths: [
          '强大的分析和逻辑思维能力',
          '良好的问题解决能力',
          '高效的执行力和任务完成能力',
          '较强的学习能力和适应性'
        ],
        improvements: [
          '提升团队协作和沟通技巧',
          '培养创新思维和创造力',
          '加强领导力和决策能力',
          '提高情绪管理和压力应对能力'
        ],
        radarChart: null
      }
    },
    computed: {
      currentQuestion() {
        return this.questions[this.currentQuestionIndex - 1]
      },
      isLastQuestion() {
        return this.currentQuestionIndex === this.questions.length
      },
      reportDate() {
        return new Date().toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: 'long',
          day: 'numeric'
        })
      },
      completionTime() {
        if (!this.startTime || !this.endTime) return 0
        const minutes = Math.floor((this.endTime - this.startTime) / 1000 / 60)
        return minutes > 0 ? minutes : 1
      },
      dimensionScores() {
        const scores = {}
        this.dimensions.forEach(dim => {
          scores[dim.key] = 0
        })
        
        this.answers.forEach(answer => {
          const option = answer.question.options[answer.optionIndex]
          Object.keys(option.dimensions).forEach(dim => {
            scores[dim] += option.dimensions[dim]
          })
        })
        
        // 归一化到0-20范围
        const maxScore = Math.max(...Object.values(scores))
        return this.dimensions.map(dim => {
          return Math.round((scores[dim.key] / maxScore) * 20)
        })
      },
      interestScores() {
        return [
          this.dimensionScores[0], // 实践型
          this.dimensionScores[1], // 研究型
          this.dimensionScores[2], // 艺术型
          this.dimensionScores[3], // 社会型
          this.dimensionScores[4], // 企业型
          this.dimensionScores[5]  // 常规型
        ]
      },
      maxInterestScore() {
        return Math.max(...this.interestScores)
      },
      topInterestIndex() {
        return this.interestScores.indexOf(this.maxInterestScore)
      },
      personalityScores() {
        // 模拟性格特质得分
        return [
          Math.floor(Math.random() * 6) + 5, // 外向性
          Math.floor(Math.random() * 6) + 5, // 宜人性
          Math.floor(Math.random() * 6) + 5, // 尽责性
          Math.floor(Math.random() * 6) + 5, // 情绪稳定性
          Math.floor(Math.random() * 6) + 5  // 开放性
        ]
      },
      totalScore() {
        const dimensionAvg = this.dimensionScores.reduce((a, b) => a + b, 0) / this.dimensionScores.length
        const personalityAvg = this.personalityScores.reduce((a, b) => a + b, 0) / this.personalityScores.length
        return Math.round((dimensionAvg * 2.5) + (personalityAvg * 2.5)) // 转换为100分制
      },
      circleStyle() {
        const degrees = (this.totalScore / 100) * 360
        return {
          background: `conic-gradient(${this.getColor(0)} 0deg, ${this.getColor(1)} ${degrees}deg, #f0f0f0 ${degrees}deg, #f0f0f0 360deg)`
        }
      }
    },
    methods: {
      startAssessment() {
        this.currentQuestionIndex = 1
        this.startTime = new Date()
      },
      selectOption(index) {
        this.selectedOption = index
      },
      nextQuestion() {
        if (this.selectedOption !== null) {
          this.answers.push({
            question: this.currentQuestion,
            optionIndex: this.selectedOption
          })
          
          if (this.isLastQuestion) {
            this.endTime = new Date()
            this.showResult = true
            this.$nextTick(() => {
              this.initRadarChart()
            })
          } else {
            this.currentQuestionIndex++
            this.selectedOption = null
          }
        }
      },
      prevQuestion() {
        if (this.currentQuestionIndex > 1) {
          this.currentQuestionIndex--
          this.selectedOption = this.answers[this.currentQuestionIndex - 1].optionIndex
          this.answers.pop()
        }
      },
      initRadarChart() {
        if (this.radarChart) {
          this.radarChart.destroy()
        }
        
        const ctx = this.$refs.radarChart.getContext('2d')
        this.radarChart = new Chart(ctx, {
          type: 'radar',
          data: {
            labels: this.dimensions.map(d => d.name),
            datasets: [
              {
                label: '您的得分',
                data: this.dimensionScores,
                backgroundColor: 'rgba(52, 152, 219, 0.2)',
                borderColor: 'rgba(52, 152, 219, 1)',
                borderWidth: 2,
                pointBackgroundColor: 'rgba(52, 152, 219, 1)',
                pointRadius: 4
              },
              {
                label: '平均水平',
                data: this.dimensions.map(() => 12),
                backgroundColor: 'rgba(155, 155, 155, 0.1)',
                borderColor: 'rgba(155, 155, 155, 0.5)',
                borderWidth: 1,
                borderDash: [5, 5],
                pointRadius: 0
              }
            ]
          },
          options: {
            scales: {
              r: {
                angleLines: {
                  display: true,
                  color: 'rgba(0, 0, 0, 0.1)'
                },
                suggestedMin: 0,
                suggestedMax: 20,
                ticks: {
                  stepSize: 5,
                  backdropColor: 'transparent'
                }
              }
            },
            plugins: {
              legend: {
                position: 'bottom',
                labels: {
                  usePointStyle: true
                }
              }
            }
          }
        })
      },
      getColor(index) {
        const colors = [
          '#3498db', // 蓝色
          '#2ecc71', // 绿色
          '#e74c3c', // 红色
          '#f39c12', // 橙色
          '#9b59b6', // 紫色
          '#1abc9c'  // 青色
        ]
        return colors[index % colors.length]
      },
      getTraitDescription(trait, score) {
        if (score >= 8) {
          return `您在此特质上表现非常突出，${trait.name}是您的显著优势。`
        } else if (score >= 6) {
          return `您在此特质上表现良好，${trait.name}是您的相对优势。`
        } else if (score >= 4) {
          return `您在此特质上表现中等，${trait.name}方面有提升空间。`
        } else {
          return `您在此特质上表现较弱，建议加强${trait.name}方面的培养。`
        }
      },
      downloadReport() {
        alert('报告下载功能需要后端支持，此处仅为演示')
      },
      printReport() {
        window.print()
      },
      retakeAssessment() {
        this.currentQuestionIndex = 0
        this.selectedOption = null
        this.showResult = false
        this.answers = []
        this.startTime = null
        this.endTime = null
      }
    },
    mounted() {
      document.title = '职业评测 - 面试题题库'
    },
    beforeUnmount() {
      if (this.radarChart) {
        this.radarChart.destroy()
      }
    }
  }
  </script>
  
  <style scoped>
  .career-assessment-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
  }
  
  .header {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .header h1 {
    font-size: 2.2rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
  }
  
  .header .subtitle {
    font-size: 1.1rem;
    color: #7f8c8d;
  }
  
  .progress-container {
    margin: 2rem 0;
  }
  
  .progress-bar {
    height: 10px;
    background: #f0f0f0;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 0.5rem;
  }
  
  .progress-fill {
    height: 100%;
    background: linear-gradient(to right, #3498db, #2ecc71);
    transition: width 0.3s;
  }
  
  .progress-text {
    text-align: center;
    color: #7f8c8d;
    font-size: 0.9rem;
  }
  
  .intro-section {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
  }
  
  .intro-card {
    background: white;
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    text-align: center;
  }
  
  .intro-card h2 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 1.5rem;
  }
  
  .intro-content {
    text-align: left;
    margin-bottom: 2rem;
  }
  
  .intro-content p {
    line-height: 1.8;
    margin-bottom: 1rem;
    color: #2c3e50;
  }
  
  .intro-content ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
  }
  
  .intro-content li {
    margin-bottom: 0.5rem;
    color: #2c3e50;
  }
  
  .intro-content li i {
    color: #3498db;
    margin-right: 0.5rem;
  }
  
  .start-btn {
    background: #3498db;
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 1rem;
  }
  
  .start-btn:hover {
    background: #2980b9;
  }
  
  .start-btn i {
    margin-right: 0.5rem;
  }
  
  .question-section {
    margin: 2rem 0;
  }
  
  .question-card {
    background: white;
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .question-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
  }
  
  .question-category {
    background: #f0f7ff;
    color: #3498db;
    padding: 0.3rem 1rem;
    border-radius: 12px;
    font-size: 0.9rem;
  }
  
  .question-number {
    color: #7f8c8d;
    font-size: 0.9rem;
  }
  
  .question-text {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 2rem;
    line-height: 1.6;
  }
  
  .options-container {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 2rem;
  }
  
  .option {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .option:hover {
    border-color: #3498db;
    background: #f5f9fd;
  }
  
  .option.selected {
    border-color: #3498db;
    background: #f0f7ff;
  }
  
  .option-content {
    display: flex;
    align-items: center;
  }
  
  .option-letter {
    font-weight: bold;
    margin-right: 1rem;
    color: #3498db;
  }
  
  .option-weight {
    background: #f0f0f0;
    color: #7f8c8d;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
  }
  
  .navigation-buttons {
    display: flex;
    justify-content: space-between;
  }
  
  .prev-btn, .next-btn {
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .prev-btn {
    background: white;
    border: 1px solid #e0e0e0;
    color: #7f8c8d;
  }
  
  .prev-btn:hover {
    border-color: #3498db;
    color: #3498db;
  }
  
  .prev-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .next-btn {
    background: #3498db;
    border: 1px solid #3498db;
    color: white;
  }
  
  .next-btn:hover {
    background: #2980b9;
    border-color: #2980b9;
  }
  
  .next-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  
  .navigation-buttons button i {
    margin: 0 0.3rem;
  }
  
  .result-section {
    margin: 2rem 0;
  }
  
  .result-header {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .result-header h2 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
  }
  
  .result-subtitle {
    font-size: 1.1rem;
    color: #7f8c8d;
    margin-bottom: 1rem;
  }
  
  .result-meta {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    color: #7f8c8d;
    font-size: 0.9rem;
  }
  
  .result-meta i {
    margin-right: 0.3rem;
  }
  
  .result-card {
    background: white;
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .score-section {
    text-align: center;
    margin-bottom: 3rem;
  }
  
  .score-section h3 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 1.5rem;
  }
  
  .score-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
  }
  
  .circle-progress {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
  }
  
  .score-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: #2c3e50;
  }
  
  .score-label {
    color: #7f8c8d;
    font-size: 0.9rem;
  }
  
  .score-description {
    max-width: 600px;
    margin: 0 auto;
  }
  
  .score-description p {
    line-height: 1.8;
    color: #2c3e50;
  }
  
  .radar-section {
    margin-bottom: 3rem;
  }
  
  .radar-section h3 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 1.5rem;
    text-align: center;
  }
  
  .radar-chart-container {
    max-width: 500px;
    margin: 0 auto 1.5rem;
  }
  
  .dimension-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
  }
  
  .legend-item {
    display: flex;
    align-items: center;
  }
  
  .legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    margin-right: 0.5rem;
  }
  
  .legend-text {
    font-size: 0.9rem;
    color: #2c3e50;
  }
  
  .interest-section {
    margin-bottom: 3rem;
  }
  
  .interest-section h3 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 1.5rem;
    text-align: center;
  }
  
  .interest-type {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  .type-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 1rem;
  }
  
  .type-description {
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
    color: #2c3e50;
  }
  
  .interest-distribution {
    max-width: 600px;
    margin: 0 auto;
  }
  
  .interest-bar {
    margin-bottom: 1rem;
  }
  
  .bar-label {
    font-size: 0.9rem;
    color: #2c3e50;
    margin-bottom: 0.3rem;
  }
  
  .bar-container {
    display: flex;
    align-items: center;
  }
  
  .bar-fill {
    height: 20px;
    border-radius: 4px;
    transition: width 0.5s;
  }
  
  .bar-value {
    margin-left: 0.5rem;
    font-size: 0.9rem;
    color: #2c3e50;
  }
  
  .personality-section {
    margin-bottom: 3rem;
  }
  
  .personality-section h3 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 1.5rem;
    text-align: center;
  }
  
  .personality-traits {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
  }
  
  .trait-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
  }
  
  .trait-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }
  
  .trait-header h4 {
    font-size: 1.1rem;
    color: #2c3e50;
  }
  
  .trait-score {
    background: #f0f0f0;
    color: #2c3e50;
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-size: 0.9rem;
  }
  
  .trait-progress {
    height: 6px;
    background: #f0f0f0;
    border-radius: 3px;
    margin-bottom: 1rem;
  }
  
  .trait-progress .progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(to right, #3498db, #2ecc71);
  }
  
  .trait-description {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #2c3e50;
  }
  
  .career-section {
    margin-bottom: 3rem;
  }
  
  .career-section h3 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 1.5rem;
    text-align: center;
  }
  
  .career-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
  }
  
  .career-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
  }
  
  .career-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }
  
  .career-header h4 {
    font-size: 1.1rem;
    color: #2c3e50;
  }
  
  .match-score {
    background: #e8f8f5;
    color: #27ae60;
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-size: 0.9rem;
  }
  
  .career-description {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #2c3e50;
    margin-bottom: 1rem;
  }
  
  .career-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .skill-tag {
    background: #f0f7ff;
    color: #3498db;
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-size: 0.8rem;
  }
  
  .recommendation-section {
    margin-bottom: 3rem;
  }
  
  .recommendation-section h3 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 1.5rem;
    text-align: center;
  }
  
  .recommendation-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 1.5rem;
  }
  
  .strengths, .improvements {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
  }
  
  .strengths h4, .improvements h4 {
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
  }
  
  .strengths h4 i {
    color: #2ecc71;
    margin-right: 0.5rem;
  }
  
  .improvements h4 i {
    color: #f39c12;
    margin-right: 0.5rem;
  }
  
  .strengths ul, .improvements ul {
    padding-left: 1.5rem;
  }
  
  .strengths li, .improvements li {
    margin-bottom: 0.5rem;
    color: #2c3e50;
    line-height: 1.6;
  }
  
  .report-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
  }
  
  .download-btn, .print-btn, .retake-btn {
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .download-btn {
    background: #3498db;
    border: 1px solid #3498db;
    color: white;
  }
  
  .download-btn:hover {
    background: #2980b9;
    border-color: #2980b9;
  }
  
  .print-btn {
    background: white;
    border: 1px solid #3498db;
    color: #3498db;
  }
  
  .print-btn:hover {
    background: #f5f9fd;
  }
  
  .retake-btn {
    background: white;
    border: 1px solid #e74c3c;
    color: #e74c3c;
  }
  
  .retake-btn:hover {
    background: #fdf5f5;
  }
  
  .report-actions button i {
    margin-right: 0.5rem;
  }
  
  @media (max-width: 768px) {
    .career-assessment-container {
      padding: 1rem;
    }
    
    .header h1 {
      font-size: 1.8rem;
    }
    
    .intro-card {
      padding: 1.5rem;
    }
    
    .question-card {
      padding: 1.5rem;
    }
    
    .recommendation-content {
      grid-template-columns: 1fr;
    }
    
    .report-actions {
      flex-direction: column;
      gap: 0.5rem;
    }
    
    .report-actions button {
      width: 100%;
    }
  }
  
  @media print {
    .header,
    .report-actions {
      display: none;
    }
    
    .result-card {
      box-shadow: none;
      padding: 0;
    }
    
    .score-circle,
    .radar-chart-container {
      page-break-inside: avoid;
    }
  }
  </style>
